<template>
  <div>
    <div class="right-like">
      <div class="like-heade">
        <span>热门歌手</span>
      </div>
      <div class="like-body-all">
        <ul class="like-body">
          <li v-for="{ id, name, img1v1Url } in data" :key="id">
            <router-link :to="`/singerdetails/${id}`">
              <img style="width: 100%" :src="img1v1Url" alt="" />
              <p
                style="
                  font-size: 12px;
                  margin-top: 3px;
                  text-align: center;
                  color: black;
                "
              >
                {{ name }}
              </p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.axios.get("/top/artists").then(res => {
        this.data = res.data.artists.slice(0, 24);
        console.log(this.data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.right-like {
  margin-top: 26px;
  margin-bottom: 25px;
}
.like-heade {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}
.like-body-all {
  width: 100%;
  height: 100%;
  margin-left: 10px;
}
.like-body > li {
  display: inline-flex;
  padding: 0 0 40px 12px;
  width: 40px;
  height: 40px;
}
</style>
